<template>
  <div class="content-box">
    <Card title="分店详情">

      <div class="content-body">
        <Row>
          <label class="search-label fl">快速查询</label>
          <Col span="10">
            <Input v-model="storeCode" placeholder="请输入分店编号"/>
          </Col>
          <Col span="3" class="tc">
            <Button type="primary" @click="onSearch">查询</Button>
          </Col>
        </Row>
        <Row class="ptop20">
          <Button icon="md-add" @click="showModals">新增分店</Button>
        </Row>
        <Table class="mtop15" border :loading="loading" :columns="tableColumns" :data="tableData">
          <template slot-scope="{ row, index }" slot="actions">
            <div>
              <Button
                type="error"
                icon="md-trash"
                size="small"
                style="margin-right: 5px"
                @click="delTableData(index)"
              >解绑</Button>
            </div>
          </template>
        </Table>
        <div class="page-box" v-if="true">
          <Page
            :total="total"
            :current.sync="pageNum"
            :page-size="pageSize"
            show-sizer
            @on-change="changePage"
            @on-page-size-change="changePageSize"
          />
        </div>
      </div>
    </Card>
    <Modal :mask-closable="false" v-model="showModal" :title="title" @on-cancel="closeModal">
      <Form ref="formItem" :model="formItem" :label-width="100" :rules="formRules" class="form-box">
        <FormItem label="分店编号" prop="storeCode">
          <Input
            v-model="formItem.storeCode"
            :disabled="isShow"
            @on-change="branchStoreCodeChange()"
            placeholder="请输入分店编号"
          ></Input>
        </FormItem>
        <FormItem label="分店名称" prop="storeName">
          <Input v-model="formItem.storeName" :disabled="true"></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="primary" @click="handleSubmit('formItem')">确定</Button>
        <Button style="margin-left: 8px" @click="handleReset('formItem')">取消</Button>
      </div>
    </Modal>
    <Modal :mask-closable="false" v-model="modalDel" width="360">
      <p slot="header" style="color:#f60;text-align:center">
        <Icon type="ios-information-circle"></Icon>
        <span>删除解绑</span>
      </p>
      <div style="text-align:center">
        <p>确认解绑此门店？</p>
      </div>
      <div slot="footer">
        <Button type="error" size="large" long :loading="delLoading" @click="cancelBind">解绑</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import {
  chainQueryBindStoreList,
  queryStore,
  bindStore,
  cancelBindStore
} from "@/api/loginMenu";
import tableColumns from "./storeColumns";
export default {
  name: "cashier",
  data() {
    return {
      loading: true,
      title: "添加分店",
      isShow: false,
      showModal: false,
      tableData: [],
      tableColumns: tableColumns,
      formItem: {
        storeCode: "",
        storeName: ""
      },
      formRules: {
        storeCode: { required: true, message: "名店编号不能为空" }
      },
      modalDel: false,
      delLoading: false,
      formIndex: -1,
      storeCode: "",
      pageNum: 1,
      pageSize: 10,
      total: 0
    };
  },
  methods: {
    init() {
      this.queryBranchStoreList();
    },
    onSearch() {
      this.pageNum = 1;
      this.queryBranchStoreList(this.storeCode);
    },
    branchStoreCodeChange(v) {
      this.queryStoreInfoByCode(this.formItem.storeCode);
    },
    async queryStoreInfoByCode(storeCode) {
      this.loading = true;
      const { data, status } = await queryStore(storeCode);
      if (data.code == 200 && status == 200) {
        this.formItem.storeName = data.data.storeName;
      } else {
        this.$Message.error(data.message);
      }
      this.loading = false;
    },
    handleSubmit(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          this.addBranchStore(this.formItem.storeCode);
        }
      });
    },
    async addBranchStore(storeCode) {
      const Loading = this.$myLoading({
        content: "正在添加分店，请稍后…"
      });
      const { data, status } = await bindStore(storeCode);
      if (data.code == 200 && status == 200) {
        this.showModal = false;
        this.queryBranchStoreList();
      } else {
        this.$Message.error(data.message);
      }
      Loading.close();
    },
    async queryBranchStoreList(storeCode) {
      let sCode = storeCode;
      if (storeCode == null) {
        sCode = '';
      }
      const Loading = this.$myLoading({
        content: ""
      });
      const { data, status } = await chainQueryBindStoreList(sCode);
      if (data.code == 200 && status == 200) {
        this.showModal = false;
        this.tableData = data.data;
      } else {
        this.$Message.error(data.message);
      }
      this.loading = false;
      Loading.close();
    },
    handleReset(name) {
      this.showModal = false;
      this.$refs[name].resetFields();
    },
    showModals() {
      this.showModal = true;
    },
    closeModal() {
      this.handleReset("formItem");
    },
    delTableData(index) {
      this.formIndex = index;
      this.modalDel = true;
    },
    cancelBind() {
      let storeCode = this.tableData[this.formIndex].storeCode;
      this.cancelBindStore(storeCode);
    },
    async cancelBindStore(storeCode) {
      this.delLoading = true;
      const { data, status } = await cancelBindStore(storeCode);
      if (data.code == 200 && status == 200) {
        this.pageNum = 1;
        this.queryBranchStoreList();
        this.delLoading = false;
        this.modalDel = false;
        this.formIndex = -1;
      } else {
        this.$Message.error(data.message);
      }
    },
    changePage(pageNum) {
      this.pageNum = pageNum;
      this.queryBranchStoreList();
    },
    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.pageNum = 1;
      this.queryBranchStoreList();
    }
  },
  mounted() {
    this.init();
  }
};
</script>

<style scoped src='./index.css'>
</style>
